{extend name="template/base_default"}
{block name="header"}


<!--<link rel="stylesheet" href="__CSS__/common.css">-->
<link rel="stylesheet" href="__CSS__/login/index.css">
<link rel="stylesheet" href="__CSS__/weuix.min.css"/>
<link rel="stylesheet" href="__CDN__/weui/weui.min.css">
<script type="text/javascript" src="__CDN__/weui/jquery-weui.min.js"></script>

<style>

    body{
        background-image:url("__IMG__/bj.png");
        background-repeat:no-repeat;
        background-size:cover;
        display:inline-block;
        text-align: center;
        color:#eeeeee;
        width: 100%;
        background-attachment: fixed;
        margin: auto;
    }



</style>
{/block}
{block name="body"}

<div class="store-box">
<img src="">

</div>
<div class='demos-content-padded'>
    <a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#half">显示底部的Popup</a>
</div>


<div id="half" class='weui-popup__container popup-bottom'>
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="toolbar">
            <div class="toolbar-inner">
                <a href="javascript:;" class="picker-button close-popup">关闭</a>
                <h1 class="title">标题</h1>
            </div>
        </div>
        <div class="modal-content">
            <div class="weui-grids">

                <div class="weui-rater">
                    <a data-num = "0" class="weui-rater-box checked"> <span class="weui-rater-inner">★</span> </a>
                    <a data-num = "1" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
                    <a data-num = "2" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
                    <a data-num = "3" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
                    <a data-num = "4" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
                </div>

                <div id='fen' class="weui_cells_title"></div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="footer"}

<script>
    $(function(){
        $('.weui-number-plus').click(function(){
            upDownOperation( $(this) );
        });
        $('.weui-number-sub').click(function(){
            upDownOperation( $(this) );
        });

        //评分js
        var arr = ["1分","2分","3分","4分","5分"];
        var num = -1;
        $(".weui-rater a").mouseover(function(){
            var thisL = $(this).index();
            for(var i = 0;i < thisL;i++){
                $(".weui-rater a").eq(i).addClass('checked');
            }
            for(var i = thisL; i < 5;i++){
                $(".weui-rater a").eq(i).removeClass('checked');
            }
            $(this).addClass('checked');
        });
        $(".weui-rater a").mouseout(function(){
            var thisL = $(this).index();
            for(var i = thisL; i < 5;i++){
                $(".weui-rater a").eq(i).removeClass('checked');
            }
        });
        $(".weui-rater").mouseout(function(){

            for(var i = 0; i < num;i++){
                $(".weui-rater a").eq(i).addClass('checked');
            }
        });
        $(".weui-rater a").click(function(){
            var thisL = $(this).index();
            $("#fen").html(arr[thisL]);
            $(this).addClass('checked');
            num = thisL+1;
            console.log(num);
        });

    });
</script>
<script>
    $(document).on("open", ".weui-popup-modal", function() {
        console.log("open popup");
    }).on("close", ".weui-popup-modal", function() {
        console.log("close popup");
    });
</script>
{/block}